<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>出库单据查询</title>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/default/easyui.css"></link>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/icon.css"></link>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/static/js/date.js"></script>
    <script src="/static/js/FileSaver.min.js"></script>
    <script src="/static/js/xlsx.full.min.js"></script>
    <script type="text/javascript">

        var url;
        //禁止整体该页面的右键弹出html相关,不阻碍easyui右键
        $(function () {
            $(document).bind('contextmenu', function (e) {
                e.preventDefault();
                $('#tree-0').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            });
        });

        //项目列表选择
        function openProjListChoose() {
            $("#projList").dialog("open").dialog("setTitle", "进入项目选择");
            $("#projTree").tree({
                url: '/admin/project/loadProjectTree',
                onLoadSuccess: function (node, data) {
                    $("#tree").tree('expandAll');
                },
                //右键选择树形菜单操作
                onContextMenu: function (e, node) { //右键时触发事件                      
                    e.preventDefault(); //阻止浏览器捕获右键事件
                    var rootNodes = $("#tree").tree('getRoots');
                    for (var i = 0; i < rootNodes.length; i++) {
                        var theNode = $("#tree").tree('find', rootNodes[i].id);
                        $("#tree").tree('uncheck', theNode.target);
                    }
                    $("#tree").tree('select', node.target);
                    if (node.attributes.state == 2) {
                        $("#tree-2").menu('show', {
                            left: e.pageX,//在鼠标点击处显示菜单
                            top: e.pageY
                        });
                    } else if (node.attributes.state == 1) {
                        $("#tree-1").menu('show', {
                            left: e.pageX,//在鼠标点击处显示菜单
                            top: e.pageY
                        });
                    } else {
                        $('#tree-0').menu('show', {
                            left: e.pageX,//在鼠标点击处显示菜单
                            top: e.pageY
                        });
                    }

                },
                //单击某类别 展示不同详细和按钮选择
                onClick: function (node) {
                    if (node.attributes.state == 2) { // 假如是二级菜单,可以删除
                        $("#projNameList").datagrid('load', {
                            "w_id": node.id
                        });
                    } else if (node.attributes.state == 1) {
                        $("#projNameList").datagrid('load', {
                            "o_id": node.id
                        });
                    }
                }
            });
            loadDataGrid();
        }

        //加载项目数据表格
        function loadDataGrid() {
            $("#projNameList").datagrid({
                //双击事件
                onDblClickRow: function (index, row) {
                    $("#projId").val(row.id);
                    $("#projName").val(row.xiangmumingcheng);
                    $("#projList").dialog("close");
                },
                onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件                      
                    e.preventDefault(); //阻止浏览器捕获右键事件
                    $(this).datagrid("clearSelections"); //取消所有选中项
                    $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                    $('#grid-data').menu('show', {
                        left: e.pageX,//在鼠标点击处显示菜单
                        top: e.pageY
                    });
                    e.preventDefault();  //阻止浏览器自带的右键菜单弹出
                },
            });
        }

        //仓库列表选择
        function openStoreListChoose() {
            $("#storeList").dialog("open").dialog("setTitle", "进入仓库选择");
            $("#storeTree").tree({
                url: '/admin/kufang/loadKufangTree',
                onLoadSuccess: function (node, data) {
                    $("#storeTree").tree('expandAll');
                },
                //右键选择树形菜单操作
                onContextMenu: function (e, node) { //右键时触发事件                      
                    e.preventDefault(); //阻止浏览器捕获右键事件
                    var rootNodes = $("#tree").tree('getRoots');
                    for (var i = 0; i < rootNodes.length; i++) {
                        var theNode = $("#tree").tree('find', rootNodes[i].id);
                        $("#tree").tree('uncheck', theNode.target);
                    }
                    $("#tree").tree('select', node.target);
                    if (node.attributes.state == 2) {
                        $("#tree-2").menu('show', {
                            left: e.pageX,//在鼠标点击处显示菜单
                            top: e.pageY
                        });
                    } else if (node.attributes.state == 1) {
                        $("#tree-1").menu('show', {
                            left: e.pageX,//在鼠标点击处显示菜单
                            top: e.pageY
                        });
                    } else {
                        $('#tree-0').menu('show', {
                            left: e.pageX,//在鼠标点击处显示菜单
                            top: e.pageY
                        });
                    }

                },
                //单击某类别 展示不同详细和按钮选择
                onClick: function (node) {
                    if (node.attributes.state == 2) { // 假如是二级菜单,可以删除
                        $("#storeNameList").datagrid('load', {
                            "w_id": node.id
                        });
                    } else if (node.attributes.state == 1) {
                        $("#storeNameList").datagrid('load', {
                            "o_id": node.id
                        });
                    }
                }
            });
            loadKufangDataGrid();
        }

        //加载项目数据表格
        function loadKufangDataGrid() {
            $("#storeNameList").datagrid({
                //双击事件
                onDblClickRow: function (index, row) {
                    $("#storeId").val(row.id);
                    $("#storeName").val(row.kufangmingcheng);
                    $("#storeList").dialog("close");
                },
                onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件                      
                    e.preventDefault(); //阻止浏览器捕获右键事件
                    $(this).datagrid("clearSelections"); //取消所有选中项
                    $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                    $('#grid-data').menu('show', {
                        left: e.pageX,//在鼠标点击处显示菜单
                        top: e.pageY
                    });
                    e.preventDefault();  //阻止浏览器自带的右键菜单弹出
                },
            });
        }


        // 查询项目
        function searchProj() {
            $("#dg4").datagrid('load', {
                "codeOrProjName": $("#s_codeOrProjName").val()
            })
        }

        //查询库房
        function searchStore() {
            $("#dg5").datagrid('load', {
                "codeOrStoreName": $("#s_codeOrStoreName").val()
            })
        }

        //填充项目选择
        function saveProjChoose() {
            var node = $('#projTree').tree('getSelected'); // 获取选中节点
            $("#projId").val(node.id);
            $("#projName").val(node.text);
            $("#projList").dialog("close");
        }

        //填充仓库选择
        function saveStoreChoose() {
            var node = $('#storeTree').tree('getSelected');
            $("#storeId").val(node.id);
            $("#storeName").val(node.text);
            $("#storeList").dialog("close");
        }

        $(document).ready(function () {
            //预设搜索时间
            $("#s_btime").datebox("setValue", genLastMonthDayStr()); // 设置上个月日期
            $("#s_etime").datebox("setValue", genTodayStr()); // 设置当前日期
            //根据列举的申购单主表,点击其中每个,列举对应主表的详细数据
            $('#dg').datagrid({
                onClickRow: function (index, row) {
                    $("#dg2").datagrid({
                        url: '/admin/chukudan/listDetailsByZId',
                        queryParams: {
                            zongzhangid: row.id
                        },
                        onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件                      
                            e.preventDefault(); //阻止浏览器捕获右键事件
                            $(this).datagrid("clearSelections"); //取消所有选中项
                            $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                            $('#grid-data').menu('show', {
                                left: e.pageX,//在鼠标点击处显示菜单
                                top: e.pageY
                            });
                            e.preventDefault();  //阻止浏览器自带的右键菜单弹出
                        },
                    });
                },
                onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件                      
                    e.preventDefault(); //阻止浏览器捕获右键事件
                    $(this).datagrid("clearSelections"); //取消所有选中项
                    $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                    $('#grid-data').menu('show', {
                        left: e.pageX,//在鼠标点击处显示菜单
                        top: e.pageY
                    });
                    e.preventDefault();  //阻止浏览器自带的右键菜单弹出
                },
            });
        });

        //搜索出库单
        function searchChukuDan() {
            $('#dg2').datagrid('loadData', {total: 0, rows: []});
            var projName = $("#projName").val();
            var xiangmumingcheng;
            if (projName.length == 0) {
                xiangmumingcheng = "";
            } else {
                xiangmumingcheng = projName;
            }
            console.log($("#s_danhao").val())
            var wuliaochukudanhao;
            var getdanhao = $("#s_danhao").val();
            if (getdanhao.length == 0) {
                wuliaochukudanhao = "";
            } else {
                wuliaochukudanhao = getdanhao;
            }
            var storeName = $("#storeName").val();
            var chkukufang;
            if (storeName.length == 0) {
                chkukufang = "";
            } else {
                chkukufang = storeName;
            }
            $("#dg").datagrid({
                url: '/admin/chukudan/getSelective',
                queryParams: {
                    wuliaochukudanhao: wuliaochukudanhao,
                    xiangmumingcheng: xiangmumingcheng,
                    chkukufang: chkukufang,
                    s_btime: $("#s_btime").datebox("getValue"),
                    s_etime: $("#s_etime").datebox("getValue")
                },
                onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件                      
                    e.preventDefault(); //阻止浏览器捕获右键事件
                    $(this).datagrid("clearSelections"); //取消所有选中项
                    $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                    $('#grid-data').menu('show', {
                        left: e.pageX,//在鼠标点击处显示菜单
                        top: e.pageY
                    });
                    e.preventDefault();  //阻止浏览器自带的右键菜单弹出
                },
            });
        }

        //删除出库单
        function deleteChukuDan() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length != 1) {
                $.messager.alert("系统提示", "请选择要删除的出库单！");
                return;
            }
            var ids = new Array();
            if (selectedRows.length > 1) {
                for (var i = 0; i < selectedRows.length; i++) {
                    ids.push(selectedRows[i].id);
                }
            } else if (selectedRows.length == 1) {
                var id = selectedRows[0].id;
                ids.push(id);
            }
            $.messager.confirm("系统提示", "<font color=red>删除出库单后,将一同删除其下的出库详细,将无法恢复,是否删除?</font>", function (r) {
                if (r) {
                    $.post("/admin/chukudan/delete", {'ids': ids}, function (result) {
                        if (result.success) {
                            $("#dg").datagrid("reload");
                            $("#dg2").datagrid("reload");
                        } else {
                            $.messager.alert("系统提示", result.errorInfo);
                        }
                    }, "json");
                }
            });
        }


    </script>
</head>
<body class="easyui-layout" style="margin: 1px">
<div region="north" style="height: 350px;">
    <table id="dg" title="出库单据查询" class="easyui-datagrid" fit=true
           fitColumns="true" pagination="true" rownumbers="true" singleSelect="true"
           toolbar="#tb">
        <thead>
        <tr>
            <!--<th field="ukyo" align="center" width="30" checkbox="true">ukyo</th>-->
            <th field="id" width="30" align="center" hidden="true">出库单ID</th>
            <th field="wuliaochukudanhao" width="70" align="center" sortable="true">物料出库单号</th>
            <th field="xiangmumingcheng" width="30" align="center" sortable="true">项目名称</th>
            <th field="chkukufang" width="40" align="center" sortable="true">出库库房</th>
            <th field="lingliaodanwei" width="35" align="right" sortable="true">领料单位</th>
            <th field="lingliaoren" width="30" align="center" sortable="true">领料人</th>
            <th field="faliaoren" width="30" align="center" sortable="true">发料人</th>
            <th field="zhaiyao" width="30" align="center" sortable="true">摘要</th>
            <th field="beizhu" width="30" align="center" sortable="true">备注</th>
            <th field="founder" width="30" align="center" sortable="true">创建人</th>
            <th field="createtime" width="70" align="center" sortable="true">创建时间</th>
        </tr>
        </thead>
    </table>

    <div id="tb">
        <div style="padding-bottom: 5px">
            <fieldset style="border-color: #E7F0FF">
                <legend>查询设置</legend>
                &nbsp;单据号：&nbsp;
                <input type="text" id="s_danhao" size="15" onkeydown="if(event.keyCode==13) searchChukuDan()"/>
                &nbsp;&nbsp;&nbsp;&nbsp;项目选择：<input type="text" id="projName" name="xiangmumingcheng"
                                                    style="width: 90px;" readonly="readonly"
                                                    onclick="openProjListChoose()" required="true"/>
                <input type="hidden" id="projId"/>
                &nbsp;&nbsp;&nbsp;&nbsp;出库库房：<input type="text" id="storeName" name="rukukufang" size="10"
                                                    readonly="readonly" onclick="openStoreListChoose()"
                                                    class="easyui-validatebox" required="true"/>
                <input type="hidden" id="storeId"/>
                &nbsp;&nbsp;&nbsp;日期：&nbsp;
                <input id="s_btime" class="easyui-datebox" editable=false style="width:100px">
                &nbsp;&nbsp;-&nbsp;&nbsp;
                <input id="s_etime" class="easyui-datebox" editable=false style="width:100px">
                &nbsp;&nbsp;<a href="javascript:searchChukuDan()" class="easyui-linkbutton" iconCls="icon-search"
                               plain="true">搜索</a>
                <!--&nbsp;&nbsp;<a href="javascript:deleteChukuDan()" class="easyui-linkbutton" iconCls="icon-remove"-->
                               <!--plain="true">删除</a>-->
                &nbsp;&nbsp;<a href="javascript:printChukuDan()" class="easyui-linkbutton" iconCls="icon-print"
                               plain="true">打印</a>
            </fieldset>
        </div>
    </div>
</div>
<div region="center" style="margin-top: 5px;">
    <table id="dg2" class="easyui-datagrid" fit=true pageList=[10,20,30,40,50,1000000]
           fitColumns="true" pagination="true" rownumbers="true" toolbar="#tbzi">
    <!--&gt;-->
        <thead>
        <tr>
            <!--<th field="ukyo1" align="center" width="30" checkbox="true">ukyo</th>-->
            <th field="dalei" width="30" align="center" sortable="true">大类</th>
            <th field="wuliaobianma" width="60" align="center" sortable="true">物料编码</th>
            <th field="mingchengguige" width="50" align="center" sortable="true">名称规格</th>
            <th field="chukushuliang" width="50" align="center" sortable="true">出库数量</th>
            <th field="danwei" width="30" align="center" sortable="true">单位</th>
            <th field="danjia" width="30" align="center" sortable="true">单价</th>
            <th field="jine" width="30" align="center" sortable="true">金额</th>
            <th field="chukukufang" width="50" align="center" sortable="true">出库库房</th>
            <th field="beizhu" width="50" align="center" sortable="true">备注</th>
            <th field="createtime" width="50" align="center" sortable="true">创建时间</th>
            <th field="zongzhangid" width="10" align="center" hidden="true">总表id</th>
        </tr>
        </thead>
    </table>
    <div id="tbzi">
        <div style="padding-bottom: 5px">
            <fieldset style="border-color: #E7F0FF">
                <legend>明细导出</legend>
                <a href="javascript:void(0)" id="export_excel" iconCls="icon-save" class="easyui-linkbutton"
                   plain="true">保存数据</a>
                - 点击'保存数据'导出下方明细
            </fieldset>
        </div>
    </div>
</div>

<!--查询项目列表-->
<div id="projList" class="easyui-dialog" style="width:800px;height:460px;"
     closed="true" data-options="onClose:function(){$('#s_codeOrProjName').val('');}">
    <div class="easyui-layout" style="width:100%;height:100%;">

        <div region="north" style="height: 50px;">
            <div style="padding-top: 8px;padding-left: 40px;">
                &nbsp;项目名称或者项目编号：&nbsp;<input type="text" id="projSearch" size="30"
                                              onkeydown="if(event.keyCode==13) searchGoods()"/>
                <a href="javascript:searchProj()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
            </div>
        </div>
        <div region="west" style="width: 200px" title="项目分类" split="true" data-options="collapsible:false">
            <div style="overflow-x: auto; overflow-y: auto; height: 90%; width:98%;">
                <ul id="projTree" class="easyui-tree" style="padding: 10px"></ul>
            </div>
            <div style="position:absolute;bottom: 10px;left: 15px">
                <a href="javascript:saveProjChoose()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">选择</a>
                <!--<a id="del" href="javascript:deleteGoodsType()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',disabled:true">删除</a>-->
            </div>
        </div>
        <div region="center">
            <table id="projNameList" title="项目列表" class="easyui-datagrid"
                   fitColumns="true" pagination="true" rownumbers="true" singleSelect="true"
                   url="/admin/dproject/getSelective" fit="true" toolbar="#tb4">
                <thead>
                <tr>
                    <th field="id" width="30" hidden=true align="center">编号</th>
                    <th field="xiangmumingcheng" width="150" align="center">项目名称</th>
                    <th field="createtime" width="90" align="left">创建时间</th>

                </tr>
                </thead>
            </table>
            <div id="tb4">
                <div>
                    <a href="javascript:saveProjChoose()" class="easyui-linkbutton" iconCls="icon-ok"
                       plain="true">选择</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!--查询仓库列表-->
<div id="storeList" class="easyui-dialog" style="width:800px;height:460px;"
     closed="true" data-options="onClose:function(){$('#s_codeOrStoreName').val('');}">
    <div class="easyui-layout" style="width:100%;height:100%;">

        <div region="north" style="height: 50px;">
            <div style="padding-top: 8px;padding-left: 40px;">
                &nbsp;仓库名称或者仓库编号：&nbsp;<input type="text" id="storeSearch" size="30"
                                              onkeydown="if(event.keyCode==13) searchGoods()"/>
                <a href="javascript:searchProj()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
            </div>
        </div>
        <div region="west" style="width: 200px" title="仓库分类" split="true" data-options="collapsible:false">
            <div style="overflow-x: auto; overflow-y: auto; height: 90%; width:98%;">
                <ul id="storeTree" class="easyui-tree" style="padding: 10px"></ul>
            </div>
            <div style="position:absolute;bottom: 10px;left: 15px">
                <a href="javascript:saveStoreChoose()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">选择</a>
                <!--<a id="del" href="javascript:deleteGoodsType()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',disabled:true">删除</a>-->
            </div>
        </div>
        <div region="center">
            <table id="storeNameList" title="仓库列表" class="easyui-datagrid"
                   fitColumns="true" pagination="true" rownumbers="true" singleSelect="true"
                   url="/admin/dkufang/getSelective" fit="true" toolbar="#tb5">
                <thead>
                <tr>
                    <th field="id" width="30" hidden=true align="center">编号</th>
                    <th field="kufangmingcheng" width="150" align="center">仓库名称</th>
                    <th field="createtime" width="90" align="left">创建时间</th>

                </tr>
                </thead>
            </table>
            <div id="tb5">
                <div>
                    <a href="javascript:saveStoreChoose()" class="easyui-linkbutton" iconCls="icon-ok"
                       plain="true">选择</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!--大屏幕上右键datagrid dlg-->
<div id="grid-data" class="easyui-menu" style="width: 80px; display: none;">
    <!--<div id="grid-data-edit" href="javascript:openDetailsModifyDialog()" data-options="iconCls:'icon-edit'">修改</div>-->
    <!--<div id="grid-data-delete" href="javascript:deleteDetails()" data-options="iconCls:'icon-remove'" plain="true">删除-->
    <!--</div>-->
</div>
<!--二级菜单右键弹出-->
<div id="tree-2" class="easyui-menu" style="width: 80px; display: none;">
    <!--<div id="tree-2-delete" href="javascript:deleteType()" data-options="iconCls:'icon-remove'">删除二级菜单</div>-->
</div>
<!--一级菜单右键弹出-->
<div id="tree-1" class="easyui-menu" style="width: 80px; display: none;">
    <!--<div id="tree-1-add-2" href="javascript:openTypeAddDialog()" data-options="iconCls:'icon-add'">添加二级菜单</div>-->
    <!--<div id="tree-1-delete" href="javascript:deleteType()" data-options="iconCls:'icon-remove'">删除一级菜单</div>-->
</div>
<!--树形菜单右键弹出-->
<div id="tree-0" class="easyui-menu" style="width: 80px; display: none;">
    <!--<div id="tree-0-add-1" href="javascript:openTypeAddDialog(0)" data-options="iconCls:'icon-add'">添加一级菜单</div>-->
    <!--<div id="tree-0-refresh" href="javascript:reloadTree()" data-options="iconCls:'icon-reload'">重新加载类别</div>-->
</div>

<script>

    function printChukuDan() {
        var selectedRows = $("#dg").datagrid("getSelections");
        if (selectedRows.length == 0) {
            $.messager.alert("系统提示", "请选择要打印的出库单！");
            return;
        }
        var detailsRows = $("#dg2").datagrid("getRows"); //当前页所有行
        if (detailsRows.length == 0) {
            $.messager.alert("系统提示", "该单据无详细数据！");
            return;
        }

        createFormPage("物 料 发 货 单", detailsRows, selectedRows, "出库打印");
    }

    // printName 打印任务名
    // printDatagrid 要打印的datagrid
    // strPrintName 打印任务名
    // printDatagrid 要打印的datagrid
    function createFormPage(strPrintName, detailsRows, selectedRows, printEnum) {
        //单据表头
        var tableString = ' <div class="box">\n' +
            '        <div class="left">\n' +
            '            <div>\n' +
            '                <p><strong>收料单位</strong></p>\n' +
            '                <p>'+selectedRows[0].shouliaoren+'</p>\n' +
            '            </div>\n' +
            '            <div>\n' +
            '                <p><strong>材料用途</strong></p>\n' +
            '                <p></p>\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="center">\n' +
            '            <div class="center_left">\n' +
            '                <strong><p>山 东 海 盛 海 洋<br><br><br>工程集团有限公司</p></strong>\n' +
            '            </div>\n' +
            '            <div class="center_right">\n' +
            '                <p>(</p>\n' +
            '                <p></p>\n' +
            '                <p>)</p>\n' +
            '            </div>\n' +
            '            <div class="center_bottom">\n' +
            '                <strong>\n' +
            '                    <p>器&nbsp;&nbsp;&nbsp;&nbsp;材&nbsp;&nbsp;&nbsp;&nbsp;发&nbsp;&nbsp;&nbsp;&nbsp;料&nbsp;&nbsp;&nbsp;&nbsp;单</p>\n' +
            '                </strong>\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="right left">\n' +
            '            <div>\n' +
            '                <p><strong>制 单 编 号</strong></p>\n' +
            '                <p>'+selectedRows[0].wuliaochukudanhao+'</p>\n' +
            '            </div>\n' +
            '            <div>\n' +
            '                <p><strong>发料库编号</strong></p>\n' +
            '                <p></p>\n' +
            '            </div>\n' +
            '        </div>\n' +
            '    </div>';
        if (printEnum == '出库打印') {
            console.log("出库打印");
        }
        //打印详情
        tableString += ' <table cellpadding="0" cellspacing="0">\n' +
            '        <thead>\n' +
            '            <tr>\n' +
            '                <td rowspan="2">器材编号</td>\n' +
            '                <td rowspan="2">器材名称及规格</td>\n' +
            '                <td rowspan="2">计量单位</td>\n' +
            '                <td rowspan="2">数量</td>\n' +
            '                <td colspan="8">单价</td>\n' +
            '                <td> </td>\n' +
            '                <td colspan="9">金额</td>\n' +
            '                <td rowspan="2">备注</td>\n' +
            '            </tr>\n' +
            '            <tr>\n' +
            '                <td>十</td>\n' +
            '                <td>万</td>\n' +
            '                <td>千</td>\n' +
            '                <td>百</td>\n' +
            '                <td>十</td>\n' +
            '                <td>元</td>\n' +
            '                <td>角</td>\n' +
            '                <td>分</td>\n' +
            '\n' +
            '                <td></td>\n' +
            '\n' +
            '                <td>百</td>\n' +
            '                <td>十</td>\n' +
            '                <td>万</td>\n' +
            '                <td>千</td>\n' +
            '                <td>百</td>\n' +
            '                <td>十</td>\n' +
            '                <td>元</td>\n' +
            '                <td>角</td>\n' +
            '                <td>分</td>\n' +
            '            </tr>\n' +
            '        </thead>';
        //开始循环获取详情数据
        //设置详情表头
        tableString += '<tbody class="shuju">';
        var heji;
        for (var i = 0; i < detailsRows.length; ++i) {
            var danjia1 = detailsRows[i].danjia+"";
            var zongjia1 = detailsRows[i].zongjia+"";
            heji += detailsRows[i].zongjia;
            //单价format
            var danjiaSplit = danjia1.split('.');
            var yuanStuff = danjiaSplit[0].split("");
            var fenStuff;
            var yuanShiWan;
            var yuanWan;
            var yuanQian;
            var yuanBai;
            var yuanShi;
            var yuanYuan;

            var fenJiao;
            var fenFen;
            //开始总价format
            var zongjiaSplit = zongjia1.split(".");
            var yuanStuffZong = zongjiaSplit[0].split("");
            var fenStuffZong;

            var yuanBaiWanZong;
            var yuanShiWanZong;
            var yuanWanZong;
            var yuanQianZong;
            var yuanBaiZong;
            var yuanShiZong;
            var yuanYuanZong;

            var fenJiaoZong;
            var fenFenZong;
            if(danjiaSplit.length>1){ //如果有元+分
                fenStuff = danjiaSplit[1].split("");
                //按分离出来的,进行价格填充
                //长度是元之前的数字的长度,
                //yuanStuff[0] 元
                //yuanStuff[1] 十
                //yuanStuff[2] 百
                //yuanStuff[3] 千
                //yuanStuff[4] 万
                //yuanStuff[5] 十(万)
                yuanShiWan = (yuanStuff[5]==undefined?"":yuanStuff[5]);
                yuanWan = (yuanStuff[4]==undefined?"":yuanStuff[4]);
                yuanQian = (yuanStuff[3]==undefined?"":yuanStuff[3]);
                yuanBai = (yuanStuff[2]==undefined?"":yuanStuff[2]);
                yuanShi = (yuanStuff[1]==undefined?"":yuanStuff[1]);
                yuanYuan = (yuanStuff[0]==undefined?"":yuanStuff[0]);
                //
                fenJiao = fenStuff[1]==undefined?"":fenStuff[1];
                fenFen = fenStuff[0]==undefined?"":fenStuff[0];

            }else if(danjiaSplit.length==1){
                //yuanStuff[5] 十(万)
                yuanShiWan = (yuanStuff[5]==undefined?"":yuanStuff[5]);
                yuanWan = (yuanStuff[4]==undefined?"":yuanStuff[4]);
                yuanQian = (yuanStuff[3]==undefined?"":yuanStuff[3]);
                yuanBai = (yuanStuff[2]==undefined?"":yuanStuff[2]);
                yuanShi = (yuanStuff[1]==undefined?"":yuanStuff[1]);
                yuanYuan = (yuanStuff[0]==undefined?"":yuanStuff[0]);
            }

            if(zongjiaSplit.length>1){ //如果有元+分
                fenStuffZong = zongjiaSplit[1].split("");
                //按分离出来的,进行价格填充

                yuanBaiWanZong = (yuanStuffZong[6]==undefined?"":yuanStuffZong[6]);
                yuanShiWanZong = (yuanStuffZong[5]==undefined?"":yuanStuffZong[5]);
                yuanWanZong = (yuanStuffZong[4]==undefined?"":yuanStuffZong[4]);
                yuanQianZong = (yuanStuffZong[3]==undefined?"":yuanStuffZong[3]);
                yuanBaiZong = (yuanStuffZong[2]==undefined?"":yuanStuffZong[2]);
                yuanShiZong = (yuanStuffZong[1]==undefined?"":yuanStuffZong[1]);
                yuanYuanZong = (yuanStuffZong[0]==undefined?"":yuanStuffZong[0]);
                //
                fenJiaoZong = fenStuffZong[1]==undefined?"":fenStuffZong[1];
                fenFenZong = fenStuffZong[0]==undefined?"":fenStuffZong[0];

            }else if(zongjiaSplit.length==1){
                //yuanStuff[5] 十(万)
                yuanBaiWanZong = (yuanStuffZong[6]==undefined?"":yuanStuffZong[6]);
                yuanShiWanZong = (yuanStuffZong[5]==undefined?"":yuanStuffZong[5]);
                yuanWanZong = (yuanStuffZong[4]==undefined?"":yuanStuffZong[4]);
                yuanQianZong = (yuanStuffZong[3]==undefined?"":yuanStuffZong[3]);
                yuanBaiZong = (yuanStuffZong[2]==undefined?"":yuanStuffZong[2]);
                yuanShiZong = (yuanStuffZong[1]==undefined?"":yuanStuffZong[1]);
                yuanYuanZong = (yuanStuffZong[0]==undefined?"":yuanStuffZong[0]);
            }


            tableString += '<tr>';
            tableString +=      '<td>'+detailsRows[i].wuliaobianma+'</td>\n' +  //器材编号
                '                <td>'+detailsRows[i].mingchengguige+'</td>\n' +  //器材名称及规格
                '                <td>'+detailsRows[i].danwei+'</td>\n' +  //计量单位
                '                <td>'+detailsRows[i].chukushuliang+'</td>\n' +  //数量
                '                <td>'+yuanShiWan+'</td>\n' +  //单价(十)
                '                <td>'+yuanWan+'</td>\n' +  //单价(万)
                '                <td>'+yuanQian+'</td>\n' + //单价(千)
                '                <td>'+yuanBai+'</td>\n' + //单价(百)
                '                <td>'+yuanShi+'</td>\n' +  //单价(十)
                '                <td>'+yuanYuan+'</td>\n' +  //单价(元)
                '                <td>'+fenJiao+'</td>\n' +  //单价(角)
                '                <td>'+fenFen+'</td>\n' +  //单价(分)
                '                <td></td>\n' +
                '                <td>'+yuanBaiWanZong+'</td>\n' +  //金额(百)
                '                <td>'+yuanShiWanZong+'</td>\n' +  //金额(十)
                '                <td>'+yuanWanZong+'</td>\n' +  //金额(万)
                '                <td>'+yuanQianZong+'</td>\n' +  //金额(千)
                '                <td>'+yuanBaiZong+'</td>\n' +  //金额(百)
                '                <td>'+yuanShiZong+'</td>\n' +  //金额(十)
                '                <td>'+yuanYuanZong+'</td>\n' +  //金额(元)

                '                <td>'+fenJiaoZong+'</td>\n' +  //金额(角)
                '                <td>'+fenFenZong+'</td>';     //金额(分)
            //only the index is 0, add beizhu
            if(i==0){
                tableString += '<td rowspan="text" class="huoqu">'+selectedRows[0].beizhu+'</td>';
            }
            tableString += '</tr>';
        }
        //合计
        // heji
        //开始总价format
        if(heji!=undefined){
            heji = heji+"";
        }
        var hejiSplit = heji.split(".");
        var yuanStuffHeji = hejiSplit[0].split("");
        var fenStuffHeji;

        var yuanBaiWanHeji;
        var yuanShiWanHeji;
        var yuanWanHeji;
        var yuanQianHeji;
        var yuanBaiHeji;
        var yuanShiHeji;
        var yuanYuanHeji;

        var fenJiaoHeji;
        var fenFenHeji;
        if(hejiSplit.length>1){ //如果有元+分
            fenStuffHeji = hejiSplit[1].split("");
            //按分离出来的,进行价格填充

            yuanBaiWanHeji = (yuanStuffHeji[6]==undefined?"":yuanStuffHeji[6]);
            yuanShiWanHeji = (yuanStuffHeji[5]==undefined?"":yuanStuffHeji[5]);
            yuanWanHeji = (yuanStuffHeji[4]==undefined?"":yuanStuffHeji[4]);
            yuanQianHeji = (yuanStuffHeji[3]==undefined?"":yuanStuffHeji[3]);
            yuanBaiHeji = (yuanStuffHeji[2]==undefined?"":yuanStuffHeji[2]);
            yuanShiHeji = (yuanStuffHeji[1]==undefined?"":yuanStuffHeji[1]);
            yuanYuanHeji = (yuanStuffHeji[0]==undefined?"":yuanStuffHeji[0]);
            //
            fenJiaoHeji = fenStuffZong[1]==undefined?"":fenStuffZong[1];
            fenFenHeji = fenStuffZong[0]==undefined?"":fenStuffZong[0];

        }else if(hejiSplit.length==1){
            //yuanStuff[5] 十(万)
            yuanBaiWanHeji = (yuanStuffHeji[6]==undefined?"":yuanStuffHeji[6]);
            yuanShiWanHeji = (yuanStuffHeji[5]==undefined?"":yuanStuffHeji[5]);
            yuanWanHeji = (yuanStuffHeji[4]==undefined?"":yuanStuffHeji[4]);
            yuanQianHeji = (yuanStuffHeji[3]==undefined?"":yuanStuffHeji[3]);
            yuanBaiHeji = (yuanStuffHeji[2]==undefined?"":yuanStuffHeji[2]);
            yuanShiHeji = (yuanStuffHeji[1]==undefined?"":yuanStuffHeji[1]);
            yuanYuanHeji = (yuanStuffHeji[0]==undefined?"":yuanStuffHeji[0]);
        }
        tableString += '            <tr>\n' +
            '                <td colspan="12">合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n' +
            '                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计</td>\n' +
            '                <td></td>\n' +
            '                <td>'+yuanBaiWanHeji+'</td>\n' +
            '                <td>'+yuanShiWanHeji+'</td>\n' +
            '                <td>'+yuanWanHeji+'</td>\n' +
            '                <td>'+yuanQianHeji+'</td>\n' +
            '                <td>'+yuanBaiHeji +'</td>\n' +
            '                <td>'+yuanShiHeji+'</td>\n' +
            '                <td>'+yuanYuanHeji+'</td>\n' +
            '                <td>'+fenJiaoHeji+'</td>\n' +
            '                <td>'+fenFenHeji+'</td>\n' +
            '            </tr>\n' +
            '        </tbody>\n' +
            '    </table>';
        //结尾
        tableString += ' <div class="bottom_box">\n' +
            '        <div class="contents">\n' +
            '            <p><strong>主管:</strong>&nbsp;&nbsp;&nbsp;<span>哈哈哈</span></p>\n' +
            '            <p><span>2020</span><strong>年&nbsp;&nbsp;</strong><span>12</span><strong>月&nbsp;&nbsp;</strong><span>31</span><strong>日&nbsp;&nbsp;</strong></p>\n' +
            '        </div>\n' +
            '        <div class="contents">\n' +
            '            <p><strong>料账员:</strong>&nbsp;&nbsp;&nbsp;<span></span></p>\n' +
            '            <p><span></span><strong>年&nbsp;&nbsp;</strong><span></span><strong>月&nbsp;&nbsp;</strong><span></span><strong>日&nbsp;&nbsp;</strong></p>\n' +
            '        </div>\n' +
            '        <div class="contents">\n' +
            '            <p><strong>业务制单:</strong>&nbsp;&nbsp;&nbsp;<span></span></p>\n' +
            '            <p><span></span><strong>年&nbsp;&nbsp;</strong><span></span><strong>月&nbsp;&nbsp;</strong><span></span><strong>日&nbsp;&nbsp;</strong></p>\n' +
            '        </div>\n' +
            '        <div class="contents">\n' +
            '            <p><strong>保管员:</strong>&nbsp;&nbsp;&nbsp;<span></span></p>\n' +
            '            <p><span></span><strong>年&nbsp;&nbsp;</strong><span></span><strong>月&nbsp;&nbsp;</strong><span></span><strong>日&nbsp;&nbsp;</strong></p>\n' +
            '        </div>\n' +
            '        <div class="contents">\n' +
            '            <p><strong>领料(提运)人:</strong>&nbsp;&nbsp;&nbsp;<span></span></p>\n' +
            '            <p><strong>车号:</strong>&nbsp;&nbsp;&nbsp;<span>12315</span></p>\n' +
            '        </div>\n' +
            '    </div>';

        localStorage.setItem("tableString", tableString);
        window.location.href = "print.html";
        // window.open("print.html", tableString,"location=no, status=no;help:no;toolbar=no, menubar=no, scrollbars=no, resizeable=no,dialogWidth:800px;top:0;left:0;dialogHeight:600px;scroll:auto;");
    }

    // var printConfig = {
    //     companyName: 'HS',
    //     printTime: new Date()
    // }
</script>
<script>
    // 导出excel按钮
    $("#export_excel").click(exportExcel);

    // 导出excel
    function exportExcel() {
        //获得选中记录 多选
        var row = $('#dg2').datagrid('getRows');
        // var row = $('#dg').datagrid('getSelections');
        // 去除不需要导出的实体字段
        var deleteKey = ['kehuishou','huishouxiang','xiangmumingcheng','lingliaodanwei',
            'o_id','s_btime','s_etime','updatetime',
            'zongzhangid', 'sort', 'order'
        ];
        for (var i in row) {
            for (var j in deleteKey) {
                delete row[i][deleteKey[j]];
            }
        }
        if (row) {
            $.messager.confirm('确认按钮', '你确定要导出本页出库明细数据?', function (r) {
                if (r) {
                    downloadExl(row);
                }
            })
        }
    }

    function downloadExl(data, type) {
        var keys = Object.keys(data[0]);
        var firstRow = {};
        keys.forEach(function (item) {
            console.log("item:" + item);
            firstRow[item] = item;
        });
        data.unshift(firstRow);

        var content = {};

        //把json格式的数据转换为excel的行列形式
        var sheetsData = data.map(function (item, rowIndex) {
            return keys.map(function (key, columnIndex) {
                return Object.assign({}, {
                    value: item[key],
                    position: (columnIndex > 25 ? getCharCol(columnIndex) : String.fromCharCode(65 + columnIndex)) + (rowIndex + 1),
                });
            });
        }).reduce(function (prev, next) {
            return prev.concat(next);
        });

        sheetsData.forEach(function (item, index) {
            // content[item.position] = {v: item.value};
            if (item.value == 'dalei') {
                content[item.position] = {v: '大类'};
            }  else if (item.value == 'wuliaobianma') {
                content[item.position] = {v: '物料编码'};
            } else if (item.value == 'mingchengguige') {
                content[item.position] = {v: '名称规格'};
            } else if (item.value == 'chukushuliang') {
                content[item.position] = {v: '出库数量'};
            } else if (item.value == 'danwei') {
                content[item.position] = {v: '单位'};
            } else if (item.value == 'danjia') {
                content[item.position] = {v: '单价'};
            } else if (item.value == 'jine') {
                content[item.position] = {v: '金额'};
            } else if (item.value == 'chukukufang') {
                content[item.position] = {v: '出库库房'};
            } else if (item.value == 'beizhu') {
                content[item.position] = {v: '备注'};
            } else if (item.value == 'createtime') {
                content[item.position] = {v: '创建时间'};
            } else {
                if (item.value == null || item.value == undefined || item.value == 'null') {
                    content[item.position] = {v: ''};  //remember
                } else {
                    content[item.position] = {v: item.value};  //remember
                }
            }
        });

        //设置区域,比如表格从A1到D10,SheetNames:标题
        var coordinate = Object.keys(content);
        var workBook = {
            SheetNames: ["1"],
            Sheets: {
                "1": Object.assign({}, content, {"!ref": coordinate[0] + ":" + coordinate[coordinate.length - 1]}),
            }
        };

        //这里的数据是用来定义导出的格式类型
        var excelData = XLSX.write(workBook, {bookType: "xlsx", bookSST: false, type: "binary"});
        var blob = new Blob([string2ArrayBuffer(excelData)], {type: ""});

        // filename = "石油焦";
        $.messager.prompt("输入框", "请输入保存文件名.", function (filename) {
            if (filename) {
                var nowTime = new Date().toLocaleDateString();
                saveAs(blob, filename + "-出库明细" + nowTime + ".xlsx"); //文件名
            }
        });
    }

    //字符串转字符流
    function string2ArrayBuffer(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) {
            view[i] = s.charCodeAt(i) & 0xFF;
        }
        return buf;
    }

    //将指定的自然数转换为26进制表示. 映射关系: [0-25] -> [A-Z]
    function getCharCol(n) {
        var temCol = "",
            s = "",
            m = 0;
        while (n > 0) {
            m = n % 26 + 1;
            s = String.fromCharCode(m + 64) + s;
            n = (n - m) / 26;
        }
        return s;
    }

</script>
</body>
</html>